<template>
	<view class="index">
		<!-- <shopList class="shopList"></shopList> -->
		<!-- <shopHead class="shopHead"></shopHead> -->
		<view class="head">
			<view class="background">
				<image src="../../static/商城橘色背景.png" />
				<!-- <image src="../../static/商城背景.png" /> -->
				<view class="balance">
					余额：
					{{ remain_star }}
					<image src="/static/星星.png" />
				</view>
				<view class="search">
					<!-- <view class="123" >查询</view> -->
					<image src="../../static/搜索.png" @click="searchCommodity()" />
					<input type="text" v-model="keyword" placeholder="搜索爱心物品" />

				</view>

				<view class="tab-bar">
					<view class="search_btn" @click="GetItems()">查询</view>
					<view class="tab-item" :class="{ 'active': activeTab === 'all' }" @click="activeTab = 'all'">
						<span :class="{ 'blue-text': activeTab === 'all' }" @click="GetAllItems()">全部</span>
					</view>
					<view class="tab-item" :class="{ 'active': activeTab === 'home' }" @click="activeTab = 'home'">
						<span :class="{ 'blue-text': activeTab === 'home' }" @click="selectCommodity('1')">手机</span>
					</view>
					<view class="tab-item" :class="{ 'active': activeTab === 'clothing' }"
						@click="activeTab = 'clothing'">
						<span :class="{ 'blue-text': activeTab === 'clothing' }" @click="selectCommodity('2')">图书</span>
					</view>
					<view class="tab-item" :class="{ 'active': activeTab === 'stationery' }"
						@click="activeTab = 'stationery'">
						<span :class="{ 'blue-text': activeTab === 'stationery' }"
							@click="selectCommodity('3')">食品</span>
					</view>
					<view class="tab-item" :class="{ 'active': activeTab === 'toys' }" @click="activeTab = 'toys'">
						<span :class="{ 'blue-text': activeTab === 'toys' }" @click="selectCommodity('4')">文具</span>
					</view>
					<view class="tab-item" :class="{ 'active': activeTab === 'books' }" @click="activeTab = 'books'">
						<span :class="{ 'blue-text': activeTab === 'books' }" @click="selectCommodity('5')">其他</span>
					</view>
				</view>
			</view>
			<view class="sort">
				<view class="sort-item">
					<text>分值预览：</text>
				</view>
				<view class="sort-item">
					<img src="../../static/星级分类1.png" @click="selectCommodityByStar('1-5')" />
				</view>
				<view class="sort-item">
					<img src="../../static/星级分类2.png" @click="selectCommodityByStar('6-10')" />
				</view>
				<view class="sort-item">
					<img src="../../static/星级分类3.png" @click="selectCommodityByStar('11-16')" />
				</view>
			</view>
		</view>
		<view class="list">
			<view class="content">
				<view class="item" v-for="item in items" :key="item.commodityId">
					<view class="up">
						<img v-bind:src="item.photoOne" />
					</view>
					<view class="down">
						<view class="text">{{ item.commodityName }}</view>
						<view class="combination">
							<view class="left">{{ item.provider }} 捐</view>
							<view class="right">剩余 {{ item.inventory }} 份</view>
						</view>
						<view class="combination">
							<view class="price">
								<view class="star">{{ item.price }}</view>
								<view class="star_picture">
									<image src="/static/星星.png" />
								</view>
							</view>
							<view class="buy_picture">
								<img v-if="shopCart.some(cartItem => cartItem.commodityId === item.commodityId)"
									src="/static/已购买.png" @click="cancelInCart(item)" />
								<img v-else src="/static/未购买.png" @click="addToCart(item)" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom"></view>
	</view>
	<!-- <shopCar class="shopCar"></shopCar> -->
	<view class="shopCar">
		<view class="left">
			<view class="detail" @click="toUrl('/pages/shopCar/shopCar')">编辑购物车</view>
		</view>
		<view class="block"></view>
		<view :class="number != 0 ? 'right active' : 'right'" @click="toUrl('/pages/shopOrder/shopOrder')">查看订单</view>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '/api';
	import shopHead from "@/components/shopHead/shopHead.vue"
	// import shopCar from '/pages/shopCar/shopCar.vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {

		components: {
			shopHead
		},
		data() {
			return {
				imageUrl: "../../static/未购买.png",
				images: ["../../static/未购买.png", "../../static/已购买.png"],
				items: [],
				shopCart: [],
				currentImageIndex: 0,
				id: 'qweasdzxc',
				commodityId: '',
				commodityName: '',
				inventory: '',
				price: '',
				quantity: '',
				shoppingCartId: '',
				keyword: "",
				kind: "",
				starNum: "",
				activeTab: null,
				// number: 0,
				// total_star: 0,
				remain_star: 0,
				// activeTab: null,
			};
		},
		onShow() {
			// this.addToCart();
			// this.searchCommodity();
			this.GetItems();
			this.remianStar();

		},
		// },
		methods: {
			GetItems() {
				console.log("我是keyword");
				console.log(this.keyword);
				uni.request({
					url: BASE_URL + '/commodity/searchCommodity?keyword=' + this.keyword,
					method: 'GET',
					header: {
						"Authorization": this.token,
					},
					success: (res) => {
						this.items = res.data.data;
						console.log(res.data);
						console.log(this.items);
						this.text = 'request success';
						// console.log(this.text);
					}
				});

				uni.request({
					url: BASE_URL + '/shoppingCart/getShopCraftByChildrenId',
					method: 'GET',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: this.id,
					},
					success: (res) => {
						this.shopCart = res.data.data;
						// console.log(res.data);
						// console.log(this.shopCart);
						this.text = 'request success';
						// console.log(this.text);
					}
				});
			},
			GetAllItems() {
				this.keyword = '',
					uni.request({
						url: BASE_URL + '/commodity/searchCommodity?keyword=' + this.keyword,
						method: 'GET',
						header: {
							"Authorization": this.token,
						},
						success: (res) => {
							this.items = res.data.data;
							console.log(res.data);
							console.log(this.items);
							this.text = 'request success';
							// console.log(this.text);
						}
					});

				uni.request({
					url: BASE_URL + '/shoppingCart/getShopCraftByChildrenId',
					method: 'GET',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: this.id,
					},
					success: (res) => {
						this.shopCart = res.data.data;
						// console.log(res.data);
						// console.log(this.shopCart);
						this.text = 'request success';
						// console.log(this.text);
					}
				});
			},
			addToCart(item) {
				this.text = 'request success';
				console.log("diaowo!item");
				console.log(item);
				uni.request({
					url: BASE_URL + '/shoppingCart',
					method: 'POST',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: 'qweasdzxc',
						commodityId: item.commodityId,
						commodityName: item.commodityName,
						inventory: item.inventory,
						price: item.price,
						quantity: 1,
						// shoppingCartId: 1,
					},
					success: (res) => {
						console.log(res)
						this.text = '添加了';
						console.log(this.text);
						this.GetItems();
					}
				});

			},
			cancelInCart(item) {
				// let datas = [] // 图片对象数组
				// datas.push(item.commodityId)
				this.text = 'request success';
				console.log("diaowo!cancel");
				console.log(item.commodityId);
				// console.log(datas)
				uni.request({
					url: BASE_URL + '/shoppingCart/delete',
					method: 'POST',
					header: {
						"Authorization": this.token,
					},
					data: [item.commodityId],
					// data: datas,
					success: (res) => {
						console.log(res)
						// this.text = '删除了';
						// console.log(this.text);
						this.GetItems();
					}
				});

			},
			// searchCommodity() {
			// 	console.log("diaowo!查询");
			// 	console.log(this.keyword);
			// 	// let keyword='相';
			// 	uni.request({
			// 		url: BASE_URL + '/commodity/searchCommodity?keyword='+this.keyword,
			// 		method: 'GET',
			// 		success: (res) => {
			// 			console.log(res)
			// 			// this.text = '删除了';
			// 			console.log("我是查询哦");
			// 			console.log(res.data);
			// 			this.items = res.data.data;
			// 			console.log(this.item);
			// 		}
			// 	});
			// 	uni.request({
			// 		url: BASE_URL + '/shoppingCart/getShopCraftByChildrenId',
			// 		method: 'GET',
			// 		data: {
			// 			childrenId: this.id,
			// 		},
			// 		success: (res) => {
			// 			this.shopCart = res.data.data;
			// 			console.log(res.data);
			// 			console.log(this.shopCart);
			// 			this.text = 'request success';
			// 			// console.log(this.text);
			// 		}
			// 	});

			// },
			selectCommodity(kind) {
				console.log("diaowo!筛选");
				// console.log(this.keyword);
				// let keyword='相';
				uni.request({
					url: BASE_URL + '/commodity/selectCommodityByFilter',
					method: 'Post',
					header: {
						"Authorization": this.token,
					},
					data: {
						kind,
						// starNum : "6-10",
					},
					success: (res) => {
						console.log(res)
						// this.text = '删除了';
						console.log("我是筛选哦");
						console.log(res.data);
						this.items = res.data.data;
						console.log(this.items);
					}
				});
				uni.request({
					url: BASE_URL + '/shoppingCart/getShopCraftByChildrenId',
					method: 'GET',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: this.id,
					},
					success: (res) => {
						this.shopCart = res.data.data;
					}
				});
			},
			selectCommodityByStar(starNum) {
				console.log("diaowo!筛选");
				// console.log(this.keyword);
				// let keyword='相';
				uni.request({
					url: BASE_URL + '/commodity/selectCommodityByFilter',
					method: 'Post',
					header: {
						"Authorization": this.token,
					},
					data: {
						starNum,
					},
					success: (res) => {
						this.items = res.data.data;
					}
				});
				uni.request({
					url: BASE_URL + '/shoppingCart/getShopCraftByChildrenId',
					method: 'GET',
					header: {
						"Authorization": this.token,
					},
					data: {
						childrenId: this.id,
					},
					success: (res) => {
						this.shopCart = res.data.data;
					}
				});
			},
			remianStar() {
				uni.request({
					url: BASE_URL + '/children/star?childrenId=' + this.id,
					method: 'GET',
					header: {
						"Authorization": this.token,
					},
					success: (res) => {
						this.remain_star = res.data.data;
						console.log(res)
						console.log("我是余额")
						// this.text = '删除了';
						// console.log(this.text);
					}
				});

			},
			toUrl(url) {
				// this.updateOrder()
				url = url
				// url = url + '?data=' + JSON.stringify(this.filteredItems) +"&number=" + this.number +"&total_star=" + this.total_star
				uni.navigateTo({
					url
				});
			},
			// ...mapActions(['updateOrder', 'addCart', 'deleteCart', 'updateNumber', 'addNumber', 'deleteNumber',
			// 	'updateStar',
			// 	'addStar', 'deleteStar', 'deleteAllStar'
			// ])
		},
		computed: {
			filteredItems: function() {
				return this.items.filter(function(item) {
					return item.status === 1
				})
			},
			...mapState(['number', 'total_star', 'token', 'children'])
		},
	};
</script>

<style lang="scss">
	// @import url("shop.scss");
	page {
		background-color: #e6e6e6;
	}

	.head {
		width: 745upx;
		height: 430upx;
		margin: 0upx 0upx;
		padding: 0upx 0upx;
		background-color: #fff;
		// margin: auto;
		border-radius: 5%;
		box-shadow: 3upx 2upx 10upx #36282b;

		.background {
			display: flex;
			width: 747upx;
			height: 300upx;

			image {
				position: absolute;
				width: 747upx;
				height: 350upx;
				border-radius: 20upx;
			}


			.balance {
				position: absolute;
				margin: 20upx 80upx;
				color: white;
				font-size: 28upx;

				image {
					// position: absolute;
					width: 28upx;
					height: 28upx;
					margin-top: 5upx;
				}
			}

			.search {
				position: absolute;
				width: 550upx;
				display: flex;
				align-items: center;
				margin: 70upx 60upx;
				background-color: white;
				text-align: center;
				border-radius: 10upx;

				image {
					// position: absolute;
					margin: 0upx 15upx;
					width: 25upx;
					height: 25upx;

				}

				input {
					flex: 1;
					border: 2upx solid #000;
					padding: 15upx;
					margin-right: 0upx;
					border-radius: 10upx;
				}
			}

			.tab-bar {
				position: absolute;
				display: flex;
				height: 150upx;
				padding: 150upx 30upx;
				box-shadow: 0 -2upx 4upx rgba(0, 0, 0, 0.1);

				.search_btn {
					position: absolute;
					margin-left: 600upx;
					margin-top: -75upx;
					// width: 25upx;
					display: inline-block;
					background-color: #565658;
					border: none;
					color: white;
					padding: 6upx 10upx;
					text-align: center;
					text-decoration: none;
					display: inline-block;
					font-size: 36upx;
					// margin: 4px 2px;
					cursor: pointer;
					border-radius: 10upx;
				}

				.tab-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					margin: 10upx 30upx;
					cursor: pointer;
				}

				.tab-item:hover {
					text-decoration: underline;
				}

				.blue-text {
					color: blue;
					text-decoration: underline;
				}
			}
		}

		.sort {
			position: absolute;
			display: flex;
			width: 800upx;
			height: 160upx;
			padding: 0upx 0upx;

			.sort-item {
				flex: 1;
				display: flex;
				// justify-content: center;
				align-items: center;

				image {
					width: 130upx;
					height: 70upx;
				}
			}
		}
	}

	.index {
		position: relative;
		height: 100%;
		overflow-y: scroll;

		.bottom {
			background-color: #e6e6e6;
			height: 60upx;
		}
	}

	.list {
		background-color: #e6e6e6;
		margin-top: 5upx;
		padding: 15upx;
		box-sizing: border-box;

		// .title {
		// 	display: flex;
		// 	justify-content: space-between;
		// 	align-items: center;

		// 	.left {
		// 		font-size: 40upx;
		// 		font-weight: 800;
		// 	}

		// 	.right {
		// 		display: flex;
		// 		align-items: center;


		// 		.text {
		// 			font-size: 24rpx;
		// 			margin-right: 10rpx;
		// 			color: #999;
		// 		}

		// 		.more {
		// 			width: 15rpx;
		// 			height: 20rpx;
		// 		}
		// 	}
		// }

		.content {
			display: flex;
			justify-content: space-between;
			flex-flow: wrap;

			.item {
				background-color: #fff;
				width: 48%;
				display: flex;
				flex-flow: column;
				margin-top: 20upx;
				border-radius: 20upx;
				box-shadow: 3upx 2upx 10upx #36282b;

				image {
					width: 100%;
					height: 400upx;
					border-radius: 20upx;
				}

				.up {
					image {
						width: 100%;
						height: 400upx;
						border-radius: 20upx;
					}
				}

				.down {
					.text {
						display: flex;
						justify-content: center;
						margin-top: 15upx;
						font-weight: 800;
					}

					.price {
						border-radius: 20upx;
						background-color: orange;
						padding: 20upx 30upx;
						margin-left: 10upx;
						margin-right: 40upx;
						width: 130upx;
						height: 10upx;
						display: flex;
						flex-flow: row;
						align-items: center;
						justify-content: center;

						.star_picture {
							width: 40upx;
							height: 40upx;

							image {
								width: 100%;
								height: 35rpx;
								margin-left: 15rpx;
								margin-top: 4rpx;
							}
						}

						.star {
							margin-top: 0rpx;
							margin-left: 0rpx;
							font-weight: 800;
						}
					}

					.combination {
						display: flex;
						flex-direction: row;
						flex-wrap: nowrap;

						.left {
							color: orange;
							display: flex;
							flex-flow: row;
							justify-content: space-between;
							width: 80%;
						}

						.right {
							color: orange;
							display: flex;
							flex-flow: row;
							justify-content: space-between;
							width: 120%;
						}

						.buy_picture {
							image {
								width: 25px;
								height: 25px;
								margin-top: 0rpx;
								border-radius: 20rpx;
							}
						}
					}
				}
			}
		}
	}

	.shopCar {
		position: fixed;
		bottom: 30upx;
		margin-left: 180upx;
		display: flex;
		// justify-content: center;
		// align-items: center;
		height: 90upx;

		.left {
			width: 200upx;
			display: flex;
			background-color: #565658;
			border-radius: 45upx 0 0 45upx;


			.detail {
				width: 200upx;
				height: 90upx;
				padding: 20upx 16upx;
				margin-left: 7upx;
			}

			.number {
				width: 90upx;
				height: 90upx;
				background-color: #d81e06;
				border-radius: 50%;
				text-align: center;
				line-height: 90upx;
				color: #fff;
			}
		}

		.block {
			width: 10upx;
			height: 90upx;
			background-color: #fff;
		}

		.right {
			color: #fff;
			background-color: orange;
			height: 90rpx;
			line-height: 90rpx;
			padding: 0 20rpx;
			border-radius: 0 40rpx 40rpx 0;
		}

		.active {
			background-color: orange !important;
		}
	}

	.dialog-wrapper {
		position: relative;
		top: 0upx;
		height: 600upx;
		width: 700upx;
		background-color: #fff;
		border-radius: 15upx;
		display: flex;
		flex-flow: column;
		align-items: flex-start;
		padding: 20upx 30upx;
		/*margin: 60upx 60upx;*/
		box-sizing: border-box;
	}

	.buy_record {
		display: flex;
		flex-flow: row;
		align-items: center;
	}

	.add {
		display: flex;
		flex-flow: row;
		align-items: center;
	}

	.title {
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
		margin-bottom: 20upx;
	}

	.btn-dock {
		position: relative;
		left: 50%;
		transform: translate(-50%, 0);
		display: flex;
		flex-flow: row;
		align-items: center;
		padding-bottom: 20upx;
	}

	.btn-cancel {
		width: 180upx;
		height: 80upx;
		display: flex;
		margin-top: 30upx;
		margin-right: 20upx;
		line-height: 80upx;
		justify-content: center;
		border-radius: 25upx;
		border: 3upx solid #dedede;
		font-size: 40upx;
	}

	.btn-save {
		width: 180upx;
		height: 80upx;
		display: flex;
		margin-top: 30upx;
		margin-left: 20upx;
		line-height: 80upx;
		justify-content: center;
		border-radius: 25upx;
		border: 3upx solid #dedede;
		font-size: 40upx;
	}
</style>